<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Terrain</h2>

		<p>Since nunuStudio is built on top of three.js it is possible to use libraries that were designed to work with three. Most of base nunuStudio objects (e.g. Scene, Lights, Meshes etc) are directly based off three.js objects.</p>
		<p>But some parts of the library were rewritten/override and from time to time you may encounter situations where external libraries made for three.js are not compatible with nunuStudio (e.g Post-processing, Renderers etc).</p>
		<p>In this tutorial we will build a simple program using the <a href="https://github.com/IceCreamYou/THREE.Terrain">THREE.Terrain</a> library for procedurely generated terrain mesh.</p>
		<p>It is important to understand that nunuStudio has its own resource management solution, but some resource types are based off three.js types, you should use the Material, Texture, Image, etc types available in nunuStudio. These should work for all external libraries (unless these libraries need a specific variant, in this scenario you should use the library specific types programatically).</p>
		<p>To import external libraries into your project drag the JS file to the resource explorer then import them into your script using the import('library.js'); method after importing the file the library can be used normally.</p>

<pre><code class="hljs javascript">include("THREE.Terrain.min.js");

function initialize()
{{'{'}}
var terrain = THREE.Terrain({{'{'}}
	steps: 1,
	useBufferGeometry: false,
	easing: THREE.Terrain.Linear,
	scattering: "SimplexLayers"
{{'}'}});
scene.add(terrain);
{{'}'}}
</code></pre>

		<img src="assets/learn/basics/terrain/notexture.png" class="img-normal"/>

		<p>Now that we got the library working we can create proper materials and textures to be attached to the library.These resource can be obtained using their name in the script object. Check previous guides for more details on the resource system and how to use them inside of scripts.

		<app-viewer fname="assets/learn/basics/terrain/terrain.nsp"></app-viewer>

	</div>
</div>
